<template>
    <div>
        
        <Top/>
        <Middle 
            :middleArr="middleArr" 
            :str="str" 
            :num="num"  
            :changeMiddle="changeMiddle"
        />
        <Footer />
    </div>
</template>

<script>
    import Top from  '../components/Top';
    import Footer from '../components/Footer';
    import Middle from '../components/Middle';

    export default {
        name:"Home",
        data(){
            return {
                str:"王宁",
                num:20,
                middleArr:[
                    {title:"html",position:"精通",isShow:false},
                    {title:"css",position:"了解",isShow:false},
                    {title:"js",position:"掌握",isShow:false},
                    {title:"es6",position:"熟练",isShow:false},
                    {title:"less",position:"了解",isShow:false},
                    {title:"node",position:"熟练",isShow:false},
                    {title:"webpack",position:"掌握",isShow:false},
                    {title:"bootstrap",position:"精通",isShow:false},
                    {title:"git",position:"精通",isShow:false},
                    {title:"express",position:"了解",isShow:false},
                    {title:"axios",position:"掌握",isShow:false},
                    {title:"promise",position:"精通",isShow:false},
                    {title:"mongodb",position:"精通",isShow:false},
                    {title:"react",position:"掌握",isShow:false},
                    {title:"vue",position:"了解",isShow:false},
                    {title:"wechat",position:"熟练",isShow:false},
                    {title:"ajax",position:"精通",isShow:false}
                ]
            }
        },
        methods:{
            changeMiddle(i){
                // console.log(this);
                this.middleArr[i].isShow = !this.middleArr[i].isShow;
            }
        },
        components:{
            Top,
            Footer,
            Middle
        },
        
    }
</script>

<style scoped>

</style>